<template>
  <div class="tab">
    <router-link class="item" tag="div" to="/recommend">
      <span>推荐</span>
    </router-link>
    <router-link class="item" tag="div" to="/singer">
      <span>歌手</span>
    </router-link>
    <router-link class="item" tag="div" to="/rank">
      <span>排行</span>
    </router-link>
    <router-link class="item" tag="div" to="/search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Tab'
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"

.tab
  display flex
  height 44px
  line-height 44px
  font-size $font-size-medium
  .item
    flex 1
    text-align center
    span
      padding-bottom 5px
      color $color-text-l
    &.router-link-active
      span
        color $color-theme
        border-bottom 2px solid $color-theme
</style>
